<template>
    <!--残损-->
    <div>
        <div style="margin-left: 70px" class="mt-print-damage" v-for="(item,index) in list">
            <div style="margin-bottom: 30px">
                <i v-show="false" style="margin-left: 245px">---------</i>
                <i v-show="true" style="margin-left: 285px">---------</i>
            </div>
            <div class="print-flex" style="margin-left: 333px;margin-top: -10px">
                <div style="min-width:35px">{{ item.year | filterYear }}</div>
                <div style="min-width:35px">{{ item.month }}</div>
                <div style="min-width:35px">{{ item.day }}</div>
            </div>
            <div class="print-flex">
                <span style="margin-left: 150px;width: 200px">{{ item.shipName }}{{ item.voyage }}</span>
            </div>
            <div class="print-flex mt-70">
                <div style="min-width: 150px">{{ item.containerId }}</div>
                <div style="min-width: 100px">{{ item.sealNo }}</div>
                <div style="min-width: 160px">{{ item.ef }}</div>
                <div style="min-width: 170px">{{ item.containerSize }}{{ item.containerType }}</div>
            </div>
            <div class="print-flex" style="margin-top: 250px">
                <div style="max-width: 300px;height: 100px">{{ item.damagedExplan }}</div>
            </div>
            <div class="print-flex" style="margin-top: 130px"
                 :style="index!==list.length-1?'page-break-after: always':''">
                <div style="margin-left: 90px;margin-top: 20px;">
                    {{ item.tallyClerk }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { getShipPlanId, shipPlanDamaged } from "@/api/shipPlan/shipPlan";

    export default {
        name: "damagePrint",
        data() {
            return {
                form: {},
                list: [],
                page: 0,
            }
        },
        created() {
            const id = this.$route.params.id
            getShipPlanId(id).then(res => {
                this.form = res.data
                shipPlanDamaged(id, {}).then(text => {
                    this.list = text.data.aaData
                    this.page = this.getPage()
                    this.$nextTick(() => {
                        console.log('打印')
                        window.print()
                        window.close()
                    })
                })
            })
        },
        methods: {
            getPage() {
                let page = this.list.length / 30
                if (page < 1) {
                    return 1
                } else if (page.toString().indexOf('.') > -1) {
                    return parseInt(page) + 1
                } else {
                    return page
                }
            }
        },
        filters: {
            filterYear(val) {
                if (val) {
                    return (val + '') ? (val + '').substr(2, 3) : ''
                } else {
                    return ''
                }
            }
        }
    }
</script>

<style scoped>
    .mt-20 {
        margin-top: 20px;
    }

    .mt-32 {
        margin-top: 32px;
    }

    .mt-35 {
        margin-top: 35px;
    }

    .mt-40 {
        margin-top: 40px;
    }

    .mt-45 {
        margin-top: 45px;
    }

    .mt-50 {
        margin-top: 50px;
    }

    .mt-60 {
        margin-top: 60px;
    }

    .mt-70 {
        margin-top: 70px;
    }

    .mt-80 {
        margin-top: 80px;
    }

    .mt-85 {
        margin-top: 85px;
    }

    .mt-print {
        margin-top: 315px !important;
        font-size: 14px;
    }

    .mt-print-total {
        margin-top: 265px !important;
        font-size: 14px;
    }

    .mt-print-detail {
        margin-top: 260px !important;
        font-size: 14px;
    }

    .mt-print-damage {
        margin-top: 240px !important;
        font-size: 14px;
    }

    .mt-print-port {
        margin-top: 180px !important;
        font-size: 14px;
    }

    .print-flex {
        display: flex;
    }

    .print-warp {
        display: flex;
        flex-wrap: wrap;
    }

    .page-next {
        page-break-after: always;
    }

    .print-other-line {
        position: relative;
        width: 500px;
        box-sizing: border-box;
        border: 1px solid;
        line-height: 120px;
        text-indent: 5px;
    }

    .print-other-line::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 250px;
        box-sizing: border-box;
        border-bottom: 1px solid;
        transform-origin: bottom center;
        transform: rotateZ(-45deg) scale(1.414);
        animation: slash 5s infinite ease;
    }

    .set {
        width: 500px;
        background: #000;
        transform-origin: bottom center;
        transform: rotateZ(-45deg) scale(1.414);
        height: 1px;
    }
</style>
